<template>
  <div>
    <el-row :gutter="20" style="display: flex">
      <el-card class="moduleCard1">
        <el-col :span="1">
          <span
            style="font-size: large;font-weight: 900;"><br />申<br />请<br />物<br />资<br />类<br />型<br />占<br />比<br />饼<br />状<br />图
          </span>
        </el-col>
        <el-col :span="11">
          <div style="height: 250px;width: 380px;" class="echart" id="piechart"></div>
        </el-col>
      </el-card>

      <el-card class="moduleCard2">
        <el-col :span="1">
          <span style="font-size: large;font-weight: 900;">
            <br /><br /><br />采<br />购<br />类<br />型<br />词<br />云<br />图
          </span>
        </el-col>
        <el-col :span="10">
          <div style="height: 250px;width: 300px;">
            <word-cloud :data="this.cloudList" nameKey="name" valueKey="value"></word-cloud>
          </div>
        </el-col>
      </el-card>

    </el-row>

    <el-row :gutter="20">
      <el-card class="moduleCard3">
        <el-col :span="24">
          <div id="boxpie" style="height: 350px;width: 764px;"></div>
        </el-col>
      </el-card>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import WordCloud from 'vue-wordcloud'

  export default {
    data() {
      return {
        pieList: [],
        cloudList: [],
        boxDataList: [],
        boxValueList: []
      }
    },
    activated() {
      this.initCloudEcharts()
      this.initEcharts()
      this.initBoxEcharts()
    },
    components: {
      WordCloud
    },
    methods: {
      initCloudEcharts() {
        // 采购类型词云图
        this.$http({
          url: this.$http.adornUrl('/examineapprove/screen/typeCloud'),
          method: 'post'
        }).then(({ data }) => {
          this.cloudList = data
          console.log(this.cloudList)
        })
      },
      initEcharts() {
        // 物质类型占比
        this.$http({
          url: this.$http.adornUrl('/examineapprove/screen/goodsRatio'),
          method: 'post'
        }).then(({ data }) => {
          this.pieList = data
          console.log(this.pieList)
          // 饼图
          const option = {
            toolbox: {
              show: true
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
              {
                name: '申请物资类型占比',
                type: 'pie',
                radius: [5, 80],
                center: ['45%', '50%'],
                // 如果没有数据的话不显示
                // stillShowZeroSum: false,
                roseType: 'area',
                itemStyle: {
                  borderRadius: 8
                },
                labelLine: {
                  normal: {
                    show: true,
                    length: 5,
                    length2: 5
                  }
                },
                data: this.pieList
              }
            ]
          }

          this.piechart = echarts.init(document.getElementById('piechart'))
          this.piechart.setOption(option)

          window.addEventListener('resize', () => {
            this.piechart.resize()
          })
        })
      },
      initBoxEcharts() {
        this.$http({
          url: this.$http.adornUrl('/sys/config/boxNum'),
          method: 'post'
        }).then(({ data }) => {
          for (var i = 0; i < data.length; i++) {
            this.boxDataList.push(data[i].name)
            this.boxValueList.push(data[i].value)
          }
          console.log(this.boxDataList)
          console.log(this.boxValueList)
          const option = {
            yAxis: {
              type: 'category',
              // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              data: this.boxDataList
            },
            xAxis: {
              type: 'value'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                axis: 'y',
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            title: {
              top: 'bottom',
              left: 'center',
              text: '各部门人数柱状图'
            },
            series: [
              {
                // data: [10, 2, 10, 8, 7, 11, 13, 2, 10, 8, 7, 11, 13],
                data: this.boxValueList,
                type: 'bar',
                itemStyle: {
                  normal: {
                    color: '#409EFF',
                    barBorderRadius: [0, 10, 10, 0]
                  }
                }
              }
            ]
          }
          this.boxpie = echarts.init(document.getElementById('boxpie'))
          this.boxpie.setOption(option)

          window.addEventListener('resize', () => {
            this.boxpie.resize()
          })
        })
      }
    }
  }
</script>
<style>
  .moduleCard1 {
    height: 250px;
    width: 420px;
  }

  .moduleCard1 .el-card__body {
    padding: 0;
  }

  .moduleCard2 {
    height: 250px;
    width: 340px;
    margin-left: 20px;
  }

  .moduleCard2 .el-card__body {
    padding: 0;
  }

  .moduleCard3 {
    height: 355px;
    width: 764px;
    margin-top: 10px;
  }

  .moduleCard3 .el-card__body {
    padding: 0;
  }

  svg {
    width: 100%;
    height: 250px;
    padding: 0px;
    margin: 0px;
  }
</style>